<!doctype html>
<html>

  <head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../css/mui.min.css" rel="stylesheet" />
    <style>
      html {
        font-family: Roboto, Arial, "Noto Sans CJK SC", "Noto Sans CJK TC", "Pingfang SC", "Microsoft Yahei", "WenQuanYi Micro Hei", sans-serif;
      }
      
      body {
        overflow-x: hidden;
        background-color: #fff !important;
      }
      
      .mui-content {
        background-color: #fff;
      }
      
      .step {
        margin-top: 30px;
        text-align: center;
      }
      
      .search-box {
        width: 80%;
        margin-left: 10%;
      }
      .img-box{
      	width: 20%;
      	margin: 20px auto;
      }
      .img-box img{
      	width: 100%;
      }
      /*底部*/
      
      .flex {
        display: flex;
      }
      
      .flex-item {
        flex: 1;
      }
      
      footer {
        height: 38px;
        line-height: 38px;
        background-color: #fff;
        position: absolute;
        bottom: 0;
        width: 100%;
        text-align: center;
        font-size: 15px
      }
      
      footer:before {
        content: '';
        height: 1px;
        position: absolute;
        right: 0;
        bottom: 38px;
        width: 100%;
        transform: scaleY(.5);
        background-color: #acacb4;
      }
      
      .search-btn {
        background-color: #5677FC;
        color: #fff;
      }
    </style>
  </head>

  <body>
    <div class="mui-content" id="#app">
      <p class="step">第一步：输入会员ID</p>
      <div class="search-box">
        <div class="mui-input-row mui-search">
          <input type="search" class="mui-input-clear search-id" placeholder="">
        </div>
      </div>
      <p class="step">扫描会员二维码</p>
      <div class="img-box">
      	<img src="../images/qr_code.png" alt="" />
      </div>
    </div>
    <!--底部-->
    <footer class="flex withdraw-btn-box">
      <div class="flex-item">

      </div>
      <div class="flex-item search-btn vux-1px-l">
        查找
      </div>
    </footer>
    <!---->
    <script src="../js/mui.min.js"></script>
    <script src="../config.js"></script>
    <script type="text/javascript">
      mui.init()
      var userInfo = {},
        currentShopObj = {}
      mui.plusReady(function() {
        receiveParams()
        bindEvent()
      })
      var currentShopObj = {}

      function receiveParams() {
        var self = plus.webview.currentWebview()
        currentShopObj = self.currentShopObj
      }

      function bindEvent() {
        document.querySelector('.search-btn').addEventListener('tap', function() {
          var userId = document.querySelector(".search-id").value
          config.ajax({
            url: '/redemption/checkVip',
            data: {
              userId: userId
            },
            success: function(res) {
              if(res.result === 1) {
                userInfo.point = res.point
                userInfo.userName = res.userName
                userInfo.userId = 2*100000000+res.userId*1
                userInfo.header = res.header
                userInfo.openId = res.openId
                next()
              } else {
                mui.toast(res.errormsg)
              }
            }
          })
        })
        mui('.img-box')[0].addEventListener('tap', function(){
      	 mui.openWindow({
          url: '../common/barcode.html',
          id: 'barcode',
          styles: {
            top: 0, //新页面顶部位置
            bottom: 0, //新页面底部位置
            titleNView: {
              titleText: '扫码',
              titleColor: "#FFFFFF",
              titleSize: "17px",
              backgroundColor: "#FF6800",
              autoBackButton: true,
              //                homeButton: true,
              buttons: [{
                float: "right",
                fontSize: "18px",
                fontSrc: "_www/fonts/iconfont.ttf", //wap2app内置字体文件
                text: "\ue602",
                onclick: function() {
                  var allPage = plus.webview.all()
                  var nowPage = plus.webview.getWebviewById('index')
                  for(var i = 0; i < allPage.length; i++) {
                    if(allPage[i].getURL() !== nowPage.getURL()) {
                      plus.webview.close(allPage[i]);
                    }
                  }
                }
              }],
              splitLine: {
                color: "#CCCCCC",
                height: "1px"
              }
            }
          },
          extras: {
            currentShopObj: currentShopObj,
            type: 3
          }
        })
      })
      }

      function next() {
        var title = currentShopObj.storeName+'兑换礼品'
        mui.openWindow({
          url: './exchange.html',
          id: 'exchange',
          styles: {
            top: 0, //新页面顶部位置
            bottom: 0, //新页面底部位置         
            titleNView: {
              titleText: title,
              titleColor: "#FFFFFF",
              titleSize: "17px",
              backgroundColor: "#FF6800",
              autoBackButton: true,
              //                homeButton: true,
              buttons: [{
                float: "right",
                fontSize: "18px",
                fontSrc: "_www/fonts/iconfont.ttf", //wap2app内置字体文件
                text: "\ue602",
                onclick: function() {
                  var allPage = plus.webview.all()
                  var nowPage = plus.webview.getWebviewById('index')
                  for(var i = 0; i < allPage.length; i++) {
                    if(allPage[i].getURL() !== nowPage.getURL()) {
                      plus.webview.close(allPage[i]);
                    }
                  }
                }
              }],
              splitLine: {
                color: "#CCCCCC",
                height: "1px"
              }
            }
          },
          extras: {
            currentShopObj: currentShopObj,
            userInfo: userInfo
          }
        })
      }
    </script>
  </body>

</html>